<template>
  <!-- 热门搜索  -->
  <!-- 热搜榜 -->
  <div class="hotContainer">
    <div class="title">热搜榜</div>
    <!-- 热搜列表 -->
    <div class="hotList">
      <div class="hotItem" v-for="(item, id) in rebang" :key="item.searchWord">
        <span class="order">{{ id + 1 }}</span>
        <span>{{ item.searchWord }}</span>
        <img class="iconImg" v-if="item.iconUrl" :src="item.iconUrl" />
      </div>
    </div>
  </div>
</template>

<script>
// 热门列表请求
import { remingliebiao } from "@/Api/API";
export default {
  data() {
    return {
      rebang: [],
    };
  },
  mounted() {
    this.resoubang();
  },
  methods: {
    async resoubang() {
      let res = await remingliebiao();
      this.rebang = res.data.data;
    },
  },
};
</script>

<style lang="less" scoped>
/* 热搜榜 */
.hotContainer {
  margin-top: 0.6rem;
  padding: 0.2rem;
}

.hotContainer .title {
  font-size: 0.28rem;
  height: 0.8rem;
  line-height: 0.8rem;
  border-bottom: 0.02rem solid #eee;
  font-weight: 700;
}

.hotList {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0.4rem;
}

.hotItem {
  width: 50%;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.26rem;
}

.hotItem .order {
  margin: 0 0.1rem;
}

.hotItem .iconImg {
  width: 0.34rem;
  height: 0.2rem;
  margin-left: 0.1rem;
}
</style>